<template>
  <div class="bg">
    <nav-com
      title="到账明细"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div
      style="margin:10px 0 0 15px;"
      @click="changeDate"
    >{{currentDate | yymmDateFormat}}</div>
    <van-pull-refresh
      v-model='isLoading'
      @refresh='onRefresh'
    >
      <van-row class="w_part2">
        <div
          v-if="list.length==0"
          class="empty"
        >
          <img src='../../assets/t4.png'>
          <p>您还没有到账记录哦~</p>
        </div>
        <ul
          v-else
          class="widthList"
        >
          <li
            v-for="(item,index) in list"
            :key="index"
          >
            <div class="list_top">
              <p>{{item.createtime | formatDateTime}}</p>
              <span>{{item.auditStatus_text}}</span>
              <!-- <span v-if="item.state == 'pending'">待审核</span>
                        <span v-if="item.state == 'success'">审核成功</span>
                        <span v-if="item.state == 'failure'">审核失败</span>
                        <span v-if="item.state == 'finish'">到账完成</span> -->
            </div>
            <div class="list_bottom">
              <p>{{item.bankName}}</p>
              <p>{{item.cardNo | formatCardNumber }}</p>
              <span class="list_text">{{item.money}}</span>
            </div>
            <div
              v-if="item.state == 'success' || item.state == 'failure' "
              class="teamlist_bottom"
            >
              <p>{{item.memo}}</p>
            </div>
          </li>

        </ul>
      </van-row>
    </van-pull-refresh>
    <van-overlay
      :show="showTime"
      @click="show = false"
    >
      <van-datetime-picker
        class="time-picker"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel='showTime=false'
        @confirm='confirm'
      />
    </van-overlay>
  </div>
</template>
<script>
import moment from "moment";
import navCom from "@/component/nav";
import { getwithdraws, withdrawlist } from "@/api/api";
export default {
  name: "withdrawalList",
  components: {
    navCom,
  },
  filters: {
    yymmDateFormat(val) {
      return moment(val).format("yyyy年MM月");
    },
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        Hours +
        ":" +
        Minutes +
        ":" +
        Seconds;
      return currentDate;
    },
  },
  data() {
    return {
      showTime: false,
      minDate: new Date((2000, 1, 1)),
      maxDate: new Date(),
      currentDate: new Date(),
      showView: true,
      uid: weixin.getUserId(),
      list: [],
      isLoading: false,
      pageNo: 1,
    };
  },
  mounted() {
    let openType = this.$route.params["openType"];
    // if(openType==0){
    //     this.type = 2
    // }else if(openType==2){
    //     this.type = 3
    // }else{

    // }
    this.type = openType;
    console.log(88, openType);
    this.init();
  },
  methods: {
     confirm(value) {
      this.showTime = false;
      this.currentDate = value;
      console.log(8888, this.currentDate);
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    // 改变查询月份
    changeDate() {
      this.showTime = true;
    },
    //返回
    backHandler() {
      this.$router.go(-1);
      // if(weixin.isAndroid()){
      //     window.JS_TROOPS.goBack()
      // }else{
      //     this.$router.go(-1);
      // }
    },
    onRefresh() {
      this.list = [];
      this.pageNo = 1;
      this.init();
      this.isLoading = false;
    },
    //初始化
    init() {
      // getwithdraws({userId:this.uid,pageNo:this.pageNo}).then(res=>{
      //     if(res.data.code == 200){
      //         this.pageNo++
      //         this.list = this.list.concat(res.data.data.rows)
      //         this.total = res.data.data.total
      //         if(this.list.length < 1 ){
      //             this.finished = true
      //         }else if(this.list.length >= this.total){
      //             this.finished = true
      //         }else {
      //             this.finished = false
      //             this.loading = false
      //         }
      //     }else {
      //         this.$dialog.alert({
      //             message:res.data.msg
      //         })
      //     }
      // })

      withdrawlist({ with_type: this.type }).then((res) => {
        console.log("withdrawlist", res);
        if (res.data.code == 1) {
          this.list = res.data.data;
          console.log("withdrawlist", this.list);
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.time-picker {
  position: absolute;
  bottom: 0;
  width: 100%;
}
p {
  padding: 0;
  margin: 0;
}
.bg {
    position: relative;
  background: #f1f3f6;
  min-height: 100vh;
}
.widthList {
  margin: 0 4vw;
  padding-top: 4vw;
  margin-bottom: 20vw;
}
.widthList li {
  border-radius: 2.6vw;
  color: #333;
  background: #fff;
  margin-bottom: 4vw;
}
.list_top {
  display: flex;
  justify-content: space-between;
  padding: 0 2.6vw;
  height: 8vw;
  line-height: 8vw;
  border-bottom: 1px solid #d8d8d8;
}
.list_top p {
  color: #999;
}
.list_top span {
  color: #ff491f;
}
.list_bottom {
  display: flex;
  justify-content: space-between;
  padding: 0 2.6vw;
  height: 13.33vw;
  line-height: 13.33vw;
}
.list_text {
  color: #ff0000;
}
.teamlist_bottom {
  padding: 0 0 2.6vw 2.6vw;
}
.empty {
  padding-top: 29.33vw;
  text-align: center;
}
.empty img {
  width: 54.4vw;
  height: 37.6vw;
}
.empty p {
  font-size: 3vw;
  color: #333;
  margin-top: 4vw;
}
</style>
